<template>
  <div>
    <div class="countent_warp">
      <!-- 名片显隐 -->
      <div v-if="flag">
        <div class="space_box"></div>
        <!-- 固定名片栏 -->
        <div class="Idfixed">
          <div class="id_wrap">
            <div
              class="id_img_wrap"
              :style="{background:'url('+saleman_info.saleman_avatarurl+') no-repeat center center/cover'}"
            ></div>
            <div class="id_text_wrap">
              <p class="p1">想投资,咨询我</p>
              <p class="p2">
                <span v-text="saleman_info.company_name"></span>
                <span>|</span>
                <span v-text="saleman_info.saleman_title"></span>
              </p>
            </div>
          </div>
          <!-- <div class="btn">
            <i-icon type="businesscard" size="20" color="#999" />
            <p>名片</p>
          </div>-->
          <div class="btn" @click="getPhone">
            <i-icon type="mobilephone" size="20" color="#999" />
            <p>电话</p>
          </div>
          <div class="btn" @click="navToIndex">
            <i-icon type="homepage" size="20" color="#999" />
            <p>首页</p>
          </div>
        </div>
        <!-- 名片 -->
        <div class="IdCard">
          <div class="inf_content">
            <div class="infoTop">
              <p v-text="saleman_info.saleman_name" class="saleman_name"></p>
              <p v-text="saleman_info.saleman_title" class="saleman_title"></p>
            </div>
            <div class="infoBtm">
              <p v-text="saleman_info.company_name" class="company_name"></p>
              <p class="saleman_brief" v-text="saleman_info.saleman_brief"></p>
            </div>
          </div>
          <div class="specialBox">
            <div
              class="imgBox"
              :style="{background:'url('+saleman_info.saleman_avatarurl+') no-repeat center center/cover'}"
            ></div>
            <div class="infoWrap">
              <img v-if="imgsrc" class="background_image" :src="imgsrc" mode="aspectFill" />
            </div>
          </div>
        </div>
        <!-- 折叠面板 -->
        <div class="caption-wrap">
          <i-collapse name="name">
            <i-collapse-item
              name="name1"
              title="查看全部信息"
              i-class-title="collapse_item_title"
              i-class-content="collapse_item_content"
            >
              <div slot="content">
                <ul>
                  <li class="detailLine">
                    <p>电话</p>
                    <p v-text="saleman_info.saleman_tel"></p>
                  </li>
                  <li class="detailLine">
                    <p>微信</p>
                    <p v-text="saleman_info.saleman_wx"></p>
                  </li>
                  <li class="detailLine">
                    <p>邮箱</p>
                    <p v-text="saleman_info.saleman_email"></p>
                  </li>
                  <li class="detailLine">
                    <p>公司</p>
                    <p v-text="saleman_info.company_name"></p>
                  </li>
                  <li class="detailLine">
                    <p>地址</p>
                    <p v-text="saleman_info.company_detail"></p>
                  </li>
                </ul>
              </div>
            </i-collapse-item>
          </i-collapse>
        </div>
      </div>

      <!-- 头条解读 -->
      <div class="textWrap">
        <span class="textTitle" v-text="info_list.inf_typename"></span>
        <span v-text="'|'" class="gap"></span>
        <span class="textTime" v-text="info_list.inf_time"></span>
      </div>
      <!-- 正文 -->
      <div class="textContentWrap">
        <h2 class="contentTitle" v-text="contenTitle"></h2>
        <div class="html_text">
          <div class="textContent" v-html="info_list.inf_content"></div>
        </div>
        <p class="source float_l" v-text="info_list.inf_source"></p>
        <p class="source float_r" v-text="info_list.inf_acter"></p>
      </div>

      <!-- <div v-if="!backFlag" class="goback" @click="navToIndex">返回首页</div> -->

      <!-- <i-modal :visible=" visible2 " @ok="handleOpen2" @cancel="handleClose2">
        <view>请先登录、实名认证</view>
      </i-modal>-->
    </div>
    <div class="content_hotsnews" >
      <!-- 热点新闻 -->
      <ul>
        <li class="hotNewsWrap" v-for="(value,key,index) in hotNews " :key="index">
          <div class="hotNewsTitleWrap">
            <i-icon type="dynamic" size="24" color="#f90" custom="iconCustom" />
            <span class="hotNewsTitle" v-text="key"></span>
          </div>
          <div
            class="descriptionWrap"
            v-for="(item,indx) in value"
            :key="indx"
            :data-inf_id="item.inf_id"
            :data-inf_source="item.inf_source"
            :data-inf_pdf="item.pdf_dispay=='1'?item.inf_pdf:''"
            @click="routerToDetail($event)"
          >
            <span></span>
            <span class="contentTitle" v-text="item.inf_title"></span>
            <p class="describe" v-text="item.inf_describe"></p>
            <p class="source">{{item.inf_source==0?sources:item.inf_source}}</p>
          </div>
        </li>
      </ul>
      <div class="goIndex">
        <div @click="navToIndex">
          <span>返回首页</span>
          <i-icon type="undo" size="24" color="#333" />
        </div>
        <div>
          <button open-type="share" class="buttn" plain="true"></button>
          <span>分享</span>
          <i-icon type="share" size="24" color="#333" />
        </div>
      </div>
      <div class="space"></div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      name: "name1", //折叠面板
      contenTitle: "",
      hotNews: {},
      openid: "",
      optid: "",
      type: "",
      inf_id: "",
      inf_source: "",
      sources: "盛大金禧",
      saleman_info: {},
      saleman_tel: "",
      info_list: {},
      inf_pdf:'',   //pdf链接
      flag: false,
      visible2: false,
      backFlag: false,
      imgsrc: "/static/images/bg.png",
      contentText: "",
      type_id: "" //进入详情页是点击的 所在新闻分类条目
    };
  },
  created() {},
  onLoad: function(options) {
    this.inf_id = options.inf_id;
    this.inf_source = options.inf_source;
    this.type_id = options.type_id;
    let that = this;
    
  },
  mounted() {
    //mounted 会在show之后执行  确保能在获取openid之后 在请求数据
 var data = {
      inf_id: this.inf_id,
      inf_source: this.inf_source
    };
    wx.showLoading({
      title: "加载中..."
    });
    console.log(this.type_id);
    
      this._getHotnews();
      this._getNewsDetail(data);
    
   

    // var data = {
    //   inf_id: this.inf_id,
    //     inf_source: this.inf_source
    //   // optid: "o-4q-4nLuzq1J4UVVKB23fbIzsbY", //测试
    //   // type: "1"

   

    // this.$apis.getHotNews().then(res => {
    //   this.hotNews = res.msg;
    // });
  },
  onReady() {
    // console.log("ONRE");
  },
  onShow(options) {
    console.log("onshow");
    if (!this.openid) {
      let that = this;
      wx.getStorage({
        key: "userInfo",
        success(res) {
          console.log(res.data.openid);
          //转发时获取storage的openid和type 用于传参
          that.openid = res.data.openid;
          that.type = res.data.type;
          // console.log(that.openid);
        },
        fail() {}
      });
    }
    

    
    var optionsList = {
      optid: this.$store.state.optid,
      inf_id: this.inf_id,
      type: this.$store.state.type, //转发传入的type   storage的type是登录者的
      inf_source: this.$store.state.inf_source
    };
    console.log(this.$store.state.scene);
    //转发进入, 获取个人信息    只有通过聊天窗口进入小程序才会显示个人名片
    if (this.$store.state.scene == 1007 || this.$store.state.scene == 1008) {
      this.$apis.getNewsDetail(optionsList).then(res => {
        console.log(res.msg);
        this.saleman_info = res.msg.userinfo;
        this.saleman_tel = res.msg.userinfo.saleman_tel;
        wx.hideLoading();
        var pages = getCurrentPages(); //确保进入小程序的转发页面才会显示个人名片   当跳转到其他页面时不会显示
        console.log(pages);

        if (pages.length == 1) {
          this.flag = true;
        } else {
          this.flag = false;
        }
        console.log(this.flag);
      });
    } else {
      this.flag = false;
    }
  },
  //设置转发
  onShareAppMessage: function() {
    wx.showLoading();
    setTimeout(() => {
      wx.hideLoading();
    }, 1000);
    return {
      title: "金禧资本",
      path: `/pages/newsDetail/main?inf_id=${this.inf_id}&openid=${
        this.openid
      }&type=${this.type}&inf_source=${this.inf_source}`
    };
  },

  methods: {
    //日期转换函数
    formatDate(t) {
      var time = new Date(t);
      var y = time.getFullYear();
      var m = time.getMonth() + 1;
      var d = time.getDate();
      return y + "-" + m + "-" + d;
    },
    _getHotnews() {
      this.$apis.getHotNews().then(res => {
        console.log(1123);
        console.log(res);
        console.log("hotnews");

        delete res.msg["金禧观点"];
        this.hotNews = res.msg;
        console.log(res.msg);

        wx.hideLoading();
      });
    },
    _getNewsDetail(data) {
      this.$apis.getNewsDetail(data).then(res => {
        console.log(1123);
        console.log(res);

        // this.flag = false;
        this.contenTitle = res.msg.inf_title.substr(0, 20);
        // this.saleman_info = res.msg.userinfo;
        this.info_list = res.msg;
        wx.hideLoading();
      });
    },
    // 调用新闻详情接口
    routerToDetail(e) {
      var data = e.currentTarget.dataset.inf_id;
      var source = e.currentTarget.dataset.inf_source;
      var  pdf= e.currentTarget.dataset.inf_pdf;
      wx.navigateTo({
       // url: `../newsDetail/main?inf_id=${data}&inf_source=${source}&type_id=${this.type_id}` //详情页传参
        url: `../text/main?inf_id=${data}&inf_source=${source} &inf_pdf=${pdf}` //详情页传参       //多写一个全文页面
      });
    },
    handleClose2() {
      this.visible2 = false;
    },
    handleOpen2() {
      //提示登录后   确认进入登录页
      this.visible2 = false;
      wx.reLaunch({
        url: "../my/main?inf_id=" + this.inf_id
      });
    },
    // phonecall
    getPhone() {
      //调用电话API  直接拨打名片信息电话
      wx.makePhoneCall({
        phoneNumber: this.saleman_tel
      });
    },
    navToIndex() {
      wx.switchTab({
        url: "../index/main"
      });
    }
  }
};
</script >

<style  lang="scss">
page {
  background-color: #fcfcfc;
}
.content_hotsnews {
  margin: 0 auto;
  width: 90%;
  .hotNewsWrap {
    .hotNewsTitleWrap {
      height: 36px;
      line-height: 36px;
      margin: 16px 0;

      .hotNewsTitle {
        font: 500 20px Microsoft YaHei;
        padding-left: 4px;
      }
    }
    .descriptionWrap {
      background-color: #fff;
      padding: 16px 16px;
      border-radius: 5px;
      border: 1px solid #d6d6d6;
      margin-bottom: 16px;
      .contentTitle {
        text-indent: 16px;
        margin-bottom: 10px;
        // height: 40px;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        // padding-bottom: 10px;
        font: 600 16px/26px Microsoft YaHei;
      }
      .describe {
        font-size: 14px;
        line-height: 22px;
        margin-bottom: 10px;
        letter-spacing: 1px;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 6;
      }
      .source {
        font-size: 14px;
        color: #666;
      }
      .source .float_r {
        float: right;
      }
      .source .float_l {
        float: left;
      }
    }
  }
  .goIndex {
    position: fixed;
    padding: 22px;
    left: 0;
    bottom: 0;
    color: #333;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 30px;
    width: 100%;
    font: 500 16px Microsoft YaHei;
    background-color: #fff;
    .buttn {
      position: absolute;
      top: 0;
      right: 16px;
      width: 70px;
      height: 50px;
      border: none;
    }
  }
  .space {
    height: 52px;
    width: 100%;
  }
}
.countent_warp {
  margin: 0 auto;
  width: 90%;
  .space_box {
    height: 40px;
    width: 100%;
  }
  //固定名片栏
  .Idfixed {
    z-index: 9;
    width: 100%;
    position: fixed;
    padding: 2px;
    top: 0;
    left: 0;
    background-color: #fff;
    display: flex;
    align-items: center;
    border-top: 1px solid #f1f1f1;
    box-shadow: -2px 0px 4px #f1f1f1;
    .id_wrap {
      display: flex;
      align-items: center;
      z-index: 100;
      .id_img_wrap {
        overflow: hidden;
        margin: 6px 8px 0 14px;
        width: 30px;
        height: 30px;
        border-radius: 50%;
        float: left;
      }
      .id_text_wrap {
        width: 220px;
        background-color: #fff;
        float: left;
        font-size: 14px;
        // padding-right: 100px;
        .p2 {
          color: #999;
          font-size: 12px;
        }
      }
    }
    .btn {
      background-color: #fff;
      border-left: 1px solid #f1f1f1;
      width: 40px;
      height: 40px;
      text-align: center;
      p {
        font-size: 13px;
        color: #999;
      }
    }
  }
  // 名片
  .IdCard {
    z-index: 1;
    position: relative;
    margin-top: 14px;
    width: 100%;
    // height: 120px;
    background-color: #fff;
    border-radius: 5px;
    box-shadow: 2px 0px 4px #bebebe, -2px 0px 4px #bebebe, 0px 2px 4px #bebebe,
      0px -2px 4px #bebebe;
    overflow: hidden;

    .inf_content {
      position: absolute;
      top: 20px;
      right: 18px;
      z-index: 11;
      width: 150px;
      text-align: right;
      .infoTop {
        .saleman_name {
          font: 600 20px Microsoft YaHei;
          color: #333;
        }
        .saleman_title {
          font: 500 13px Microsoft YaHei;
          color: rgb(131, 130, 130);
          height: 30px;
          line-height: 30px;
        }
      }
      .infoBtm {
        .company_name {
          font: 600 15px Microsoft YaHei;
          color: rgb(68, 68, 68);
          height: 30px;
          line-height: 30px;
        }
        .saleman_brief {
          font: 500 13px Microsoft YaHei;
          color: #333;
          padding-top: 16px;
          overflow: hidden;
          line-height: 18px;
          text-align: end;
          text-indent: 20px;
        }
      }
    }
    .specialBox {
      position: relative;
      // padding-left: 10px;
      height: 192px;
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: space-between;
      .imgBox {
        // border-radius: 50%;

        // border: 2px solid #fff;
        width: 190px;
        height: 100%;
        // position: absolute;
        // top: 0;
        // left: 10px;
        overflow: hidden;
      }

      .infoWrap {
        padding-top: 20px;
        text-align: end;
        position: absolute;
        height: 322px;
        width: 267px;
        top: -15px;
        right: -75px;
        transform: rotate(15deg);
        background-color: #fafafa;
        .background_image {
          height: 100%;
          position: absolute;
          width: 100%;
          left: 10px;
          top: 0px;
          z-index: -1;
        }
      }
    }
  }
  //折叠面板
  .collapse_item_title {
    font: 500 12px Microsoft YaHei;
    color: #666;
  }
  .collapse_item_content {
    padding-top: 10px;
    font: 500 14px Microsoft YaHei;
    color: #666;
    .detailLine {
      overflow: hidden;
      height: 36px;
      p {
        float: left;
      }
      :last-child {
        width: 208px;
      }
      :first-child {
        width: 50px;
      }
    }
  }
  .box {
    margin: 10px auto;
    border-radius: 15px;
    height: 20px;
    border: 1px solid #f1f1f1;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #f8f8f8;
    width: 90%;
  }
  .box .ipt {
    font-size: 12px;
    padding: 2px 20px;
    width: 70%;
  }
  // 头条解读标题
  .textWrap {
    height: 36px;
    padding-left: 5px;
    line-height: 36px;
    margin-top: 10px;
    .textTitle {
      font: 600 18px Microsoft YaHei;
      // font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif
    }
    .gap {
      padding: 0 10px;
    }
    .textTime {
      font-size: 14px;
      color: #666;
    }
  }
  .textContentWrap {
    background-color: #fff;
    padding: 16px 16px;
    border-radius: 5px;
    box-shadow: 2px 0px 4px #f1f1f1, -2px 0px 4px #f1f1f1, 0px 2px 4px #f1f1f1,
      0px -2px 4px #f1f1f1;
    margin-bottom: 12px;
    .contentTitle {
      padding-bottom: 10px;
      font: 600 16px/20px Microsoft YaHei;
    }
    .html_text {
      .Editor {
        width: 100%;
        .Editor_img {
          width: 270px;
          height: auto;
        }
      }
    }
    .textContent {
      font-size: 14px;
      line-height: 22px;
      padding-bottom: 10px;
    }
    .source {
      font-size: 14px;
      color: #666;
      width: 100px;
      display: inline-block;
    }
    .float_r {
      float: right;
      width: 180px;
      text-align: right;
    }
  }

  .goback {
    width: 80px;
    height: 30px;
    line-height: 30px;
    color: #fff;
    position: fixed;
    text-align: center;
    left: 0;
    bottom: 30px;
    background-color: rgba(0, 0, 0, 0.3);
  }
}
</style>
